<template>
	<div class="shangpinziliaoku">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品资料库</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div style=" padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
          <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
            <div><img src="../../../static/img/xitong3.png" style="width: 22px; margin-right: 10px;"></div>
            <div>商品资料库</div>
          </div>
          <div style="background: rgb(255, 255, 255); border-radius: 20px; padding: 20px;" >
            
              <div class="flex">
                    <div>
                        <div style="margin-bottom: 10px;">商品名称&编码</div>
                        <div><el-input v-model="search.goods_info" style="width: 200px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                    </div>
                    <div>
                        <div style="margin-bottom: 10px;">上下架</div>
                        <div>
                            <el-select v-model="search.status" clearable style="width: 200px; margin-right: 30px;" placeholder="上下架状态">
                                <el-option  label="已上架" :value="100"> </el-option>
                                <el-option  label="已下架" :value="0"> </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div style="margin-right: 30px;">
                        <div style="margin-bottom: 10px;">&nbsp;</div>
                        <div><el-button type="primary" round icon="el-icon-search" @click="sousuo">检索</el-button></div>
                    </div>
                </div>
          </div>

          <div>
            <!-- 列表 -->
            <div class="t_table_list_con" v-for="(item,index) in list" :key="index">
              <div class="t_table_list_con_con">
                <div>
                  <div style="font-size: 20px;color: rgb(2, 12, 29);display: inline-block;font-weight: 400;font-family:'HarmonyOS_Sans_SC_'">{{ item.title }}</div> 
                  <div style="display: inline-block;font-size: 14px;font-weight: 400;color: rgb(106, 106, 106);margin-left: 7px;">商品编码: {{ item.fetch_code }}</div>
                  <div class="t_item_info">
                    <span class="t_table_list_con_title" style="font-size: 14px;font-weight: 400;color: rgb(106, 106, 106);font-family:'HarmonyOS_Sans_SC_'">更新时间: </span>
                    <span style="font-size: 14px;font-weight: 400;color: rgb(106, 106, 106);margin-left: 7px;font-family:'HarmonyOS_Sans_SC_'"> {{ item.updated_at }}</span>
                  </div>
                  <div style="margin-top: 15px;float: left;">
                    <span class="t_table_list_con_title" style="font-size: 14px;font-weight: 400;font-family:'HarmonyOS_Sans_SC_';color: rgb(2, 12, 29)">详情: </span>
                    <!-- 若是富文本 -->
                    <!-- <div>
                        <bianjishangpinxiangqing :description="item.description" :descriptionIndex="index"></bianjishangpinxiangqing>
                    </div> -->
                    <div v-if="expandcollapse.includes(index)"  :class="isopen == 1?'tupiancss':'quanbucss'">
                      <div v-html="item.description" style="width: 600px">
                      </div>
                    </div>
                    <div v-if="!expandcollapse.includes(index)"  class="tupiancss">
                      <div v-html="item.description" style="width: 600px">
                      </div>
                    </div>
                    <div style="cursor: pointer;" @click="openTupian(index)">
                      <div v-if="!expandcollapse.includes(index)&&item.description!==''" style="color: #175DFF;margin-top: 15px">展开 >></div>
                      <div v-if="expandcollapse.includes(index)" style="color: #175DFF;margin-top: 15px"><< 收起</div>
                    </div>
                    <!-- <div style="margin-bottom: 30px;margin-top: 30px;">
                      <span class="t_table_list_con_title" style="font-size: 14px;font-weight: 400;color: rgb(2, 12, 29);font-family:'HarmonyOS_Sans_SC_'">上下架状态: </span>
                      <span v-if="item.status==100" style="font-size: 14px;font-weight: 400;color: rgb(106, 106, 106);margin-left: 7px;font-family:'HarmonyOS_Sans_SC_'"> 已上架</span>
                      <span v-if="item.status==0" style="font-size: 14px;font-weight: 400;color: rgb(106, 106, 106);margin-left: 7px;font-family:'HarmonyOS_Sans_SC_'"> 已下架</span>
                    </div> -->
                  </div>
                </div>
                <div >
                  <div style="width: 450px;padding: 19px;background: #F6F6F6; border-radius: 10px">
                          <div>  
                                <div>
                                  <img src="../../../static/img/shangjia-2.png" style="width: 16px;margin-right:0.1rem;display: inline-block;vertical-align: middle"> 
                                  <div style="display: inline-block;vertical-align: middle;font-size: 16px;"> 上下架状态 : 
                                    <div v-if="item.status==100" style="display: inline-block;color: #6A6A6A;">上架</div>
                                    <div v-if="item.status==0" style="display: inline-block;color: #6A6A6A;">下架</div>
                                  </div>
                                </div>
                                <div style="margin-top: 16px">
                                  <img src="../../../static/img/shangxianshijian.png" style="width: 16px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                                  <div style="display: inline-block;vertical-align: middle;font-size: 16px"> 上线时间 : 
                                      <div style="display: inline-block;color: #6A6A6A;"> {{ item.created_at }}</div>
                                  </div>
                                </div>
                                <div style="margin-top: 16px">
                                  <img src="../../../static/img/rili.png" style="width: 16px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                                  <div style="display: inline-block;vertical-align: middle;font-size: 16px"> 开卡年龄 : 
                                    <div style="display: inline-block;color: #6A6A6A;"> {{ item.min_age }}-{{ item.max_age }}</div>
                                  </div>
                                </div>
                                <div style="margin-top: 16px">
                                  <img src="../../../static/img/heyue.png" style="width: 16px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                                  <div style="display: inline-block;vertical-align: middle;font-size: 16px">合约期 : 
                                    <div style="display: inline-block;color: #6A6A6A;">
                                      <div v-if="item.contract==0" style="display: inline-block;color: #6A6A6A">无</div>
                                      <div v-if="item.contract==1" style="display: inline-block;color: #6A6A6A">1个月</div>
                                      <div v-if="item.contract==2" style="display: inline-block;color: #6A6A6A">2个月</div>
                                      <div v-if="item.contract==3" style="display: inline-block;color: #6A6A6A">3个月</div>
                                      <div v-if="item.contract==4" style="display: inline-block;color: #6A6A6A">4个月</div>
                                      <div v-if="item.contract==5" style="display: inline-block;color: #6A6A6A">5个月</div>
                                      <div v-if="item.contract==6" style="display: inline-block;color: #6A6A6A">6个月</div>
                                      <div v-if="item.contract==7" style="display: inline-block;color: #6A6A6A">7个月</div>
                                      <div v-if="item.contract==8" style="display: inline-block;color: #6A6A6A">8个月</div>
                                      <div v-if="item.contract==9" style="display: inline-block;color: #6A6A6A">9个月</div>
                                      <div v-if="item.contract==10" style="display: inline-block;color: #6A6A6A">10个月</div>
                                      <div v-if="item.contract==11" style="display: inline-block;color: #6A6A6A">11个月</div>
                                      <div v-if="item.contract==12" style="display: inline-block;color: #6A6A6A">12个月</div>
                                      <div v-if="item.contract==24" style="display: inline-block;color: #6A6A6A">24个月</div>
                                      <div v-if="item.contract==36" style="display: inline-block;color: #6A6A6A">36个月</div>
                                    </div>
                                  </div>
                                </div>
                                <div style="margin-top: 16px">
                                  <div style="display: inline-block;font-size: 16px">
                                    <img src="../../../static/img/express-package-full.png" style="width: 16px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                                    快递方式 : 
                                    <span style="color: #6A6A6A;">{{ item.express }}</span>
                                  </div>
                                </div>
                                <div style="margin-top: 16px">
                                  <div style="display: inline-block;font-size: 16px">
                                    <img src="../../../static/img/xuanzejihuob.png" style="width: 16px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                                    激活方式 : 
                                    <span style="color: #6A6A6A;">{{ item.activation_method }}</span>
                                  </div>
                                </div>
                                <div style="margin-top: 16px">
                                  <img src="../../../static/img/24gf-thumbsUp2.png" style="width: 16px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                                  <div style="display: inline-block;vertical-align: middle;font-size: 16px">支持选号 : 
                                    <div v-if="item.take_number==1||item.take_number==2" style="display: inline-block;color: #6A6A6A;"> 支持</div>
                                    <div v-if="item.take_number==0" style="display: inline-block;color: #6A6A6A;"> 不支持</div>
                                  </div>
                                </div>
                          </div>
                </div>







                  
                </div>
                <!-- <div class="t_tab_w3">
                </div> -->
                <!-- <div class="t_tab_w4" style="box-sizing: border-box;padding-right: 20px;">{{ item.reason }}</div>
                <div class="t_tab_w5">
                  <div class="t_item_info">{{ item.status_name }}</div>
                  <div class="t_item_info" v-if="item.active_name=='激活且充值'" ><span class="t_table_list_con_title">金额：</span>{{ item.recharge_amount }}</div>
                </div>
                <div class="t_tab_w6" style="max-height: 130px; overflow: auto;">
                  <div v-html="item.remarks"></div>
                </div> -->
              </div>
            </div>

              <el-pagination :page-size="search.page_size"
              @current-change = 'pagechange'
              style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :total=total>
              </el-pagination>
              
          </div>
		  <!-- <footers></footers> -->
        </div>
      </div>
    </div>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import topandleft from '../topandleft.vue'
  import bianjishangpinxiangqing from '../shangpinguanli/bianjishangpinxiangqing.vue'
	export default {
		name: 'dingdanchuli',
        components:{
        left,top,topandleft,footers,bianjishangpinxiangqing
        },
		data() {
			return {
        nowtab:1,
        list:[],
        expandcollapse: [],
        total:0,
        search:{
          page:1,
          page_size:10,
          goods_info:'',
          status:100//上下架状态
        },
        goods_name: '',
        goods_sku: '',
        shoujiban:false,
        loading: false,
        finished: false,
        relo:true,
        isopen:1,
        zhankaishow:false
		 }
		},
		created() {
		},
		mounted() {
            if(window.screen.width < 1080){
                this.shoujiban = true
                var h = document.documentElement.clientWidth / 7.5 + 'px';
                document.documentElement.style.fontSize = h;
            }else{
                this.getlist()
            }
		},
		methods: {
      onLoad() {
        // axios.get('/own/my/order',{params:this.search}).then((response)=>{
        // 	if (response.data.msg.code == 0) {
        //     if(response.data.data.data.length > 0){
        //       response.data.data.data.forEach(item=>{
        //         this.list.push(item)
        //       })

        //       if (this.list.length >= response.data.data.total) {
        //         this.finished = true;
        //       }else{
        //         this.search.page++
        //         this.loading = false;
        //       }
        //     }else{
        //       this.finished = true;
        //     }

        // 	} else {
        // 		this.$message.error(response.data.msg.info);
        // 	}
        // })
      },
      //列表
      getlist(){
        axios.get('/agent/page/package/details',{params:this.search}).then((response)=>{
            console.log('response23456',response)
        	if (response.data.msg.code == 0) {
            this.list = response.data.data.data
            this.total = response.data.data.total
        	// } else {
        	// 	this.$message.error(response.data.msg.info);
        	}
        })
      },

      //搜索
      searchbtn(){
        this.search.page = 1
        if(window.screen.width < 1080){
          this.list = []
          this.loading = false;
          this.finished = false
        }else{
          this.getlist()
        }
      },
      //分页
      pagechange(val){
        console.log(val)
        this.search.page = val
        //列表
        this.getlist()
      },
      //搜索
      sousuo(){
            this.search.page = 1
            this.getlist()
        },
      //展开图片
      openTupian(index){
          console.log('index',index)
          if (this.expandcollapse.includes(index)) {
          this.expandcollapse = this.expandcollapse.filter((item) => {
            return item !== index;
          });
          // this.isopen = 2
        } else {
          this.expandcollapse.push(index);
          this.isopen = 2
          // this.zhankaishow = !this.zhankaishow
        }
      },
      //收起图片
      closeTupian(){
        this.isopen = 1
      }
	  }
	}
</script>

<style scoped>
    /deep/.t_table_list_con .el-button{
    padding-top: 0;
    padding-bottom: 0;
    }
    /deep/.t_table_list_con .el-dropdown{
    margin-top: 0 !important;
    }
  .t_list_tab_box{
    display: flex;
    justify-content: space-between;
     margin-top: 30px;
    align-items: center;
  }
  .t_choose_tab_box{
    display: flex;

  }
  .t_tab_title{
    color: #020C1D;
    display: flex;
    flex-direction:column;
    align-items: center;
    cursor: pointer;
  }
  .t_tab_title_lei{
    color: #005AFF;
  }
  .t_under_line{
    width: 30px;
    height: 2px;
    background-color: #F6F8FB;
    margin-top: 10px;
  }
  .t_under_line_lei{
    background-color: #005AFF;
  }
  .t_table_header_box{
    height: 60px;
    background-color: white;
    border-radius: 20px;
    display: flex;
    padding: 0 30px;
    align-items: center;
  }
  .t_table_header_box div{
    font-size: 14px;
    color: #404247;
  }
  .t_table_list_con{
    background-color: white;
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .t_tab_w1{
    width: 12%;
  }
  .t_tab_w2{
    width: 13%;
  }
  .t_tab_w3{
    width: 25%;
  }
  .t_tab_w4{
    width: 17%;
  }
  .t_tab_w5{
    width: 11%;
  }
  .t_tab_w6{
    width: 17%;
  }
  .t_tab_w7{
    width: 5%;
  }
  .t_table_list_con_con{
    /* height: 350px; */
    font-size: 14px;
    box-sizing: border-box;
    padding: 20px 30px 20px 30px;
    display: flex;
    justify-content: space-between;
  }
  .t_table_list_con_title{
    color: #787D85;
  }
  .t_item_info{
    margin-top: 15px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    font-weight: 500;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-dropdown{
    margin-left:10px;
    margin-top: 10px;
  }
  /deep/.el-textarea.is-disabled .el-textarea__inner{
    border-radius: 20px;
  }
  .t_change_seller_title{
    margin-bottom: 13px;
    font-size: 16px;
  }
  .t_photo_top{
    display: flex;
    justify-content: space-between;
  }
  .t_img_list_box{
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
  }
  .t_img_box{
    width: 380px;
    height: 230px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #F6F8FB;
    position: relative;
    cursor: pointer;
  }
  .t_img_item{
    text-align: center;
  }
  .t_img_tips{
    color: #787D85;
    font-size: 16px;
    margin-top: 15px;
  }
  .t_add_img{
    color: #005AFF;
    font-size: 34px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -17px;
    margin-top: -17px;
  }
  .t_check_old_img{
    width:380px;
    height: 230px;
    border-radius: 10px;
  }
  .tupiancss{
    height:200px;overflow: hidden
  }
  .quanbucss{
    display: block
  }
  
</style>
<style scoped lang="less">
  .shangpinziliaoku{
    .sxjact{background: rgb(0, 90, 255); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 150px; height: 60px; margin-right: 30px; }
    .sxj{background: rgb(227, 232, 241); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(175, 179, 188); width: 150px; height: 60px; margin-right: 30px; }
    .xt{width: 72px;height: 26px; margin-right: 10px; border-radius: 5px; font-size: 12px;}
    .lj{width: 100px; height: 32px; color: rgb(64, 66, 71); background: rgb(227, 232, 241); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    .ljact{width: 100px; height: 32px; color: rgb(0, 90, 255); background: rgb(228, 237, 255); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    .bushi3{ margin-right: 20px;}
    .act{ background: rgb(0, 90, 255) !important; color: #fff !important;}
  }

</style>
